<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script language="javascript" src="../../../js/jquery.js"></script>
<script language="javascript" src="../../../js/common.js"></script>
<script language="javascript" src="../../../js/My97DatePicker/WdatePicker.js"></script>
<link href="../../../js/scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../../../js/jquery-easyui-1.3.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../js/jquery-easyui-1.3.5/themes/icon.css">
<script type="text/javascript" src="../../../js/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../../js/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="../../../themes/css/tsm-icon.css" />

<body>
	<h2>Extend editors for DataGrid</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip">&nbsp;</div>
		<div>Click the edit button on the right side of row to start editing with numberspinner editor for unit cost field.</div>
	</div>
	
	<div style="margin:10px 0">
	</div>
	
	<table id="tt" style="width:600px;height:250px"
			url="data/datagrid_data.json" title="Editable DataGrid" iconCls="icon-edit"
			singleSelect="true" idField="itemid" fitColumns="true">
		<thead>
			<tr>
				<th field="itemid" width="60">Item ID</th>
				<th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
				<th field="unitcost" width="80" align="right" editor="numberspinner">Unit Cost</th>
				<th field="attr1" width="180" editor="text">Attribute</th>
				<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
				<th field="action" width="80" align="center" formatter="formatAction">Action</th>
			</tr>
		</thead>
	</table>
	<script type="text/javascript">
		function formatAction(value,row,index){
			if (row.editing){
				var s = '<a href="#" onclick="saverow(this)">Save</a> ';
				var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
				return s+c;
			} else {
				var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
				var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
				return e+d;
			}
		}
	</script>
	<script>
		$.extend($.fn.datagrid.defaults.editors, {
			numberspinner: {
				init: function(container, options){
					var input = $('<input type="text">').appendTo(container);
					return input.numberspinner(options);
				},
				destroy: function(target){
					$(target).numberspinner('destroy');
				},
				getValue: function(target){
					return $(target).numberspinner('getValue');
				},
				setValue: function(target, value){
					$(target).numberspinner('setValue',value);
				},
				resize: function(target, width){
					$(target).numberspinner('resize',width);
				}
			}
		});
		$(function(){
			$('#tt').datagrid({
				onBeforeEdit:function(index,row){
					row.editing = true;
					updateActions(index);
				},
				onAfterEdit:function(index,row){
					row.editing = false;
					updateActions(index);
				},
				onCancelEdit:function(index,row){
					row.editing = false;
					updateActions(index);
				}
			});
		});
		function updateActions(index){
			$('#tt').datagrid('updateRow',{
				index:index,
				row:{}
			});
		}
		function getRowIndex(target){
			var tr = $(target).closest('tr.datagrid-row');
			return parseInt(tr.attr('datagrid-row-index'));
		}
		function editrow(target){
			$('#tt').datagrid('beginEdit', getRowIndex(target));
		}
		function deleterow(target){
			$.messager.confirm('Confirm','Are you sure?',function(r){
				if (r){
					$('#tt').datagrid('deleteRow', getRowIndex(target));
				}
			});
		}
		function saverow(target){
			$('#tt').datagrid('endEdit', getRowIndex(target));
		}
		function cancelrow(target){
			$('#tt').datagrid('cancelEdit', getRowIndex(target));
		}
	</script>
</body>
</html>